<template>
    <f7-page class="page-friend" no-toolbar>
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center>张大大</f7-nav-center>
            <f7-nav-right>
                <f7-link icon-fa="ellipsis-h" open-popover="#noticeSetting"></f7-link>
            </f7-nav-right>
        </f7-navbar>
        <div class="profile">
            <div class="cover">
                <img src="../../assets/images/test.jpg" alt="">
            </div>
            <div class="userinfo">
                <div class="hd clearfix">
                    <div class="avatar">
                        <img src="../../assets/images/test.jpg" alt="">
                    </div>
                    <span class="username">张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大</span>
                </div>
                <div class="bd clearfix">
                    <f7-icon fa="venus" color="pink"></f7-icon>
                    <div class="intro">
                        <p>
                            <span>昵称：</span>一步一步往上爬
                        </p>
                        <p>
                            <span>简介：</span>努力北漂的女汉子
                        </p>
                    </div>
                    <f7-button class="btn-follow">关注</f7-button>
                </div>
                <div class="ft clearfix">
                    <div class="btn-chat-wrap">
                        <f7-link icon-fa="envelope-o" class="btn-chat" @click="openPrivatlyChat"> 私信</f7-link>
                    </div>
                    <div class="sort">
                        <ul class="clearfix">
                            <li>
                                <f7-icon fa="check-square-o"></f7-icon> 好朋友
                            </li>
                            <li>
                                <f7-icon fa="check-square-o"></f7-icon> 初中同学
                            </li>
                            <li>
                                <f7-icon fa="square-o"></f7-icon> 高中同学
                            </li>
                            <li>
                                <f7-icon fa="square-o"></f7-icon> 同事
                            </li>
                            <li class="btn-edit">
                                <f7-link icon-fa="edit" @click="editCircle"></f7-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="timeline-home">
                <div class="year">2017年</div>
                <f7-card class="news-card self-card sub-news-card">
                    <div class="time">07.06&emsp;评论了</div>
                    <f7-card-header>
                        <h3 class="tit">
                            <f7-link href="/news/detail/">欧洲冠军联赛小组赛抽签，皇马、多特蒙德、热刺同组；巴塞罗那抽到尤文图斯；巴黎与拜仁同组。</f7-link>
                        </h3>
                        <f7-link class="img-wrap" href="/news/detail/">
                            <img class="img-fit" src="../../assets/images/test.jpg" alt="">
                        </f7-link>
                    </f7-card-header>
                    <f7-card-footer>
                        <div class="comments clearfix">
                            <ul class="list">
                                <li>
                                    <f7-link class="user-role">角色名可以很长很长</f7-link>
                                    <f7-link class="user-name">张大大:</f7-link>这个作者写的真是太好了
                                </li>
                                <li>
                                    <f7-link class="user-role">角色名可以很长很长很长</f7-link>
                                    <f7-link class="user-name">陈二二:</f7-link>这个作者写的真是太好了
                                </li>
                                <li>
                                    <f7-link class="user-role">角色名可以很长很长很长很长</f7-link>
                                    <f7-link class="user-name">王三三:</f7-link>这个作者写的真是太好了
                                </li>
                            </ul>
                            <f7-link class="link-more">75条好友叨叨>></f7-link>
                        </div>
                    </f7-card-footer>
                </f7-card>
                <f7-card class="news-card self-card sub-news-card">
                    <div class="time">07.06&emsp;评论了</div>
                    <f7-card-header>
                        <h3 class="tit">
                            <f7-link href="/news/detail/">欧洲冠军联赛小组赛抽签，皇马、多特蒙德、热刺同组；巴塞罗那抽到尤文图斯；巴黎与拜仁同组。</f7-link>
                        </h3>
                        <f7-link class="img-wrap" href="/news/detail/">
                            <img class="img-fit" src="../../assets/images/test.jpg" alt="">
                        </f7-link>
                    </f7-card-header>
                    <f7-card-footer>
                        <div class="comments clearfix">
                            <ul class="list">
                                <li>
                                    <f7-link class="user-role">角色名可以很长很长</f7-link>
                                    <f7-link class="user-name">张大大:</f7-link>这个作者写的真是太好了
                                </li>
                                <li>
                                    <f7-link class="user-role">角色名可以很长很长很长</f7-link>
                                    <f7-link class="user-name">陈二二:</f7-link>这个作者写的真是太好了
                                </li>
                                <li>
                                    <f7-link class="user-role">角色名可以很长很长很长很长</f7-link>
                                    <f7-link class="user-name">王三三:</f7-link>这个作者写的真是太好了
                                </li>
                            </ul>
                            <f7-link class="link-more">75条好友叨叨>></f7-link>
                        </div>
                    </f7-card-footer>
                </f7-card>
            </div>
        </div>

        <f7-popover id="noticeSetting">
            <ul>
                <li>
                    <f7-icon fa="check-circle-o"></f7-icon> 屏蔽他的消息
                </li>
                <li>
                    <f7-icon fa="circle-o"></f7-icon> 对他屏蔽消息
                </li>
            </ul>
        </f7-popover>

        <div id="circleEditTpl" style="display:none;">
            <f7-list form id="circleForm">
                <f7-list-item checkbox name="circle" value="1" title="家人" checked></f7-list-item>
                <f7-list-item checkbox name="circle" value="2" title="朋友" checked></f7-list-item>
                <f7-list-item checkbox name="circle" value="3" title="专业奶爸"></f7-list-item>
                <f7-list-item class="add">
                    <f7-link icon-fa="plus-circle"></f7-link>
                    <div class="input-wrap">
                        <input type="text" placeholder="添加新圈子">
                        <f7-icon class="ico-check" fa="check-circle"></f7-icon>
                    </div>
                </f7-list-item>
            </f7-list>
        </div>

        <chat :isOpenPrivatlyChat="isOpenPrivatlyChat" @closePrivatlyChat="closePrivatlyChat"></chat>
    </f7-page>
</template>

<style lang="scss">
@import "../../assets/css/common.scss";
.page-friend {
  .cover {
    height: 145px;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
      min-height: 100%;
    }
  }

  .userinfo {
    position: relative;
    margin: 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #999;

    .hd {
      position: absolute;
      top: -60px;
    }

    .avatar {
      float: left;
      width: 95px;
      height: 80px;
      margin-right: 10px;
      overflow: hidden;
      border-radius: 5px;

      img {
        display: block;
        width: 100%;
        min-height: 100%;
      }
    }

    .username {
      max-height: 60px;
      font-size: 22px;
      @include ellipsis(2);
    }

    .bd {
      padding: 10px 0 0 105px;

      .icon {
        float: left;
        margin-right: 5px;
        font-size: 20px;
      }
    }

    .intro {
      padding: 0 90px 0 20px;
      font-size: 12px;
      p {
        margin: 0 0 5px 0;

        span {
          color: #999;
        }
      }
    }

    .btn-follow {
      position: absolute;
      top: 10px;
      right: 0;
      width: 80px;
    }

    .btn-chat-wrap {
      float: left;
      text-align: center;
      width: 95px;
      line-height: 45px;
    }

    .btn-chat {
      display: inline-block;

      .icon {
        font-size: 20px;
      }
    }

    .sort {
      margin-left: 95px;
      padding: 0 5px;
      background: #ddd;
      overflow: hidden;

      ul {
        margin: 5px 0;
      }

      li {
        float: left;
        margin: 5px 10px;
        font-size: 12px;
        color: #666;

        .icon {
          font-size: 18px;
        }

        &.btn-edit {
          float: right;
        }
      }
    }
  }
}

  .timeline-home{
    margin: 0 0 10px 0;
    padding: 0;

    .year {
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      padding: 0 15px;
    }

    .time {
      padding: 10px 15px 0;
      font-size: 12px;
      color: #999;
    }

    .card-header {
        padding-top: 5px;
    }

    .card-header,
    .card-footer {
      padding-left: 45px;
    }

    .card-footer {
      padding-top: 0;

      &:before {
        content: "";
        position: static;
        display: block;
        width: auto;
        margin: 0 0 5px 15px;
        border-top: 1px dotted #999;
      }
    }

    .comments {
      .list {
        padding-right: 0;
      }
      background: none;
      padding-right: 0;
    }
  }

#noticeSetting {
  width: 150px;

  ul {
    margin: 0;
  }

  li {
    padding: 5px 15px;
    border-bottom: 1px dotted #999;

    &:last-of-type {
      border: none;
    }
  }
}

#circleForm {
  margin: 15px 0 0;

  ul {
    background: none;

    &:after {
      display: none;
    }
  }

  .add {
    padding-top: 10px;

    .item-inner {
      padding-right: 0;
    }

    a {
      margin-right: 18px;
    }

    .input-wrap {
      position: relative;
      padding: 0 30px 0 0;
      height: 30px;
      border: 1px solid #ddd;
    }

    input {
      padding: 0 10px;
      height: 100%;
    }

    .ico-check {
      position: absolute;
      right: 5px;
      top: 3px;
      color: #ccc;
    }
  }
}
</style>

<script>
import mainToolbar from "../components/mainToolbar.vue";
import chat from "./chat.vue";
export default {
  data() {
    return {
      isOpenPrivatlyChat: false
    };
  },
  components: {
    mainToolbar,
    chat
  },
  methods: {
    // 编辑圈子
    editCircle() {
      let _this = this;
      this.$f7.confirm(_this.$$("#circleEditTpl").html(), "张大大属于您以下圈子");
    },
    openPrivatlyChat() {
      this.isOpenPrivatlyChat = true;
    },
    closePrivatlyChat() {
      this.isOpenPrivatlyChat = false;
    }
  }
};
</script>
